<template>
    <div class="atts">
        <div class="rows" v-for="item in map">
            <div class="lab one-line">{{ item.key }}</div>
            <div class="val one-line" v-if="item.type == 'sim'">{{ item.value }}</div>
            <div class="val one-line" v-else-if="item.type == 'v3'">
                <div class="rows" v-for="(v, k) in item.value">
                    <div class="lab">{{ k }}</div>
                    <input class="val" :value="v" @change="onTxt($event, item, k)" type="number" />
                </div>
            </div>
        </div>
        <div class="rows" v-if="size">
            <div class="lab one-line">size</div>
            <div class="val one-line">
                <div class="rows" v-for="(v, k) in size">
                    <div class="lab">{{ k }}</div>
                    <div class="val">{{ v }}</div>
                </div>
            </div>
        </div>
        <div class="add" @click="onShape">添加物體</div>
        <div class="add" @click="onBodies">添加剛體</div>
        <div class="add" @click="onReset">重置</div>
        <div class="add" @click="onInit">初始化</div>
        <div class="add remove" @click="onRemove">删除</div>
    </div>
</template>

<script lang="ts" setup>
import { Bus, V2G_INIT_WORLD, V2G_REMOVE_MESH, V2G_RESET_MESH } from "../game/Bus";
import { useLayout } from "@/stores/layout";
import { PropType, ref, watch } from "vue";
// interface IProp {
//     obj: any,
//     size: any
// }
// const props = defineProps<IProp>();

interface IV3 {
    x: number;
    y: number;
    z: number;
}

// const props = defineProps({
//     obj: Object,
//     size: Object as PropType<IV3>
// });

const props = defineProps<{
    obj: any;
    size: IV3 | null;
}>();

const map = ref<any>([]);
const SIM = ["number", "string", "boolean"];
const V3 = ["position", "rotation", "scale"];
const layout = useLayout();

watch(
    () => props.obj,
    item => {
        map.value = [];
        for (let i in item) {
            let value = item[i];
            let t = typeof value;
            if (SIM.includes(t)) {
                map.value.push({
                    key: i,
                    type: "sim",
                    value
                });
            } else if (V3.includes(i)) {
                map.value.push({
                    key: i,
                    type: "v3",
                    value: {
                        x: value.x,
                        y: value.y,
                        z: value.z
                    }
                });
            }
        }
        console.log(map);
    }
);


const onTxt = (e: any, val: any, key: any) => {
    console.log(e, val, key);
    console.log(props.obj);
    props.obj[val.key][key] = Number((e.target as any).value);
};

const onShape = () => {
    layout.showShape(true);
};

const onBodies = () => {
    layout.showBodies(true);
};

const onRemove = () => {
    Bus.emit(V2G_REMOVE_MESH, props.obj.id);
};

const onReset = () => {
    Bus.emit(V2G_RESET_MESH, props.obj.id);
};

const onInit = () => {
    Bus.emit(V2G_INIT_WORLD, props.obj.id);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
